<script setup lang="ts">
import ApiTicket from "@/api/ticket";
import CouponItem from "./CouponItem.vue";
import ByEmpty from "@/components/ui/ByEmpty.vue";
import ByIcon from "@/components/ui/ByIcon.vue";

import useList from "@/hooks/useList";

import { PaymentCouponInfo } from "@/types/coupon";

const props = defineProps<{
  aid?: number;
  amount?: string;
  merchant_id?: number;
}>();

defineEmits<{
  (e: "close"): void;
  (e: "selected", coupon: PaymentCouponInfo): void;
}>();

// 获取优惠券列表
const { list } = useList<PaymentCouponInfo>(ApiTicket.getPaymentCoupons, {
  search: {
    order_amount: Number(props.amount),
    merchant_id: props.merchant_id,
    act_id: props.aid
  },
});
</script>

<template>

  <view class="p-3">

    <view class="relative m-2 text-center text-xl">
      <text> 选择优惠券</text>
      <ByIcon name="Close" class="absolute top-0 right-0" @tap="$emit('close')" />
    </view>

    <view class="h-[65vh] overflow-y-auto">

      <ByEmpty title="暂无可用优惠券" v-if="list.length === 0" />

      <CouponItem v-for="coupon in list"
                  :key="coupon.id"
                  :source="coupon"
                  @tap="$emit('selected', coupon)" />
    </view>
  </view>
</template>
